<template>
  <div>
    <!--   导航栏开始   -->
    <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
      <el-menu-item>LOGO</el-menu-item>
      <el-menu-item :index="cl.id" v-for="cl in Classification">{{ cl.title }}</el-menu-item>

      <el-menu-item style="float: right">
        <el-input placeholder="请输入需要搜索的内容" v-model="append">
          <el-button slot="append" icon="el-icon-search" @click="Search()"></el-button>
        </el-input>
      </el-menu-item>

    </el-menu>
    <!-- 导航栏结束 -->
    <!-- 主体部分 -->
    <el-main class="layout_main">
      <router-view/>
    </el-main>
  </div>

</template>

<script>
export default {
  data() {
    return {
      /* 搜索的内容 */
      append: '',
      url: "176.212.26.22:9090",
      activeIndex: '',
      /* 导航栏 */
      Classification: [{title: "冬季女装", id: 1}, {title: "冬季男装", id: 2}],
    }
  },
  methods: {
    /* 搜索物品 */
    Search() {
      console.log("搜索物品")
      this.$router.push({path: '/testDemo', query: {append: this.append}});
    },
    /* 获取导航栏 */
    getClassification() {
      console.log("获取导航栏");
      /* 访问路径 */
      let url = 'http://' + this.url + '/portal/homes/navbar';
      console.log("url=" + url)
      this.axios.create({'headers': {'Authorization': localStorage.getItem("jwt")}}).get(url).then((response) => {
        let responseBody = response.data;
        console.log(responseBody);
        this.tableData = responseBody.data;
      })
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    /* 加载页面时自启动 */
    mounted() {
      console.log("mounted...")
      this.getDetails();
      this.getClassification();
    }
  }
}
</script>
